<!doctype html>
<html>

	<head>
		<meta charset="utf-8">

		<title>文字逐行向上滚动</title>
		<link href="css/index.css" rel="stylesheet" type="text/css">
		<script src="js/jquery.min.js"></script>
	</head>

	<body>

		<!-- -------------摇奖排行榜---------------  -->
		<div class="Top_Record">
			<div class="record_Top">
				<p>中奖排行榜</p>
			</div>
			<div class="topRec_List">
				<dl>
					<dd>编号</dd>
					<dd>姓名</dd>
					<dd>奖项</dd>
					<dd>时间</dd>
				</dl>
				<div class="maquee">
					<ul>
						<li>
							<div>1</div>
							<div>王**</div>
							<div>中了30元</div>
							<div>2014/12/30 14:20</div>
						</li>
						<li>
							<div>2</div>
							<div>王**</div>
							<div>中了30元</div>
							<div>2018/12/30 14:20</div>
						</li>
						<li>
							<div>3</div>
							<div>王**</div>
							<div>中了30元</div>
							<div>2018/12/30 14:20</div>
						</li>
						<li>
							<div>4</div>
							<div>王**</div>
							<div>中了30元</div>
							<div>2018/12/30 14:20</div>
						</li>
						<li>
							<div>5</div>
							<div>王**</div>
							<div>中了30元</div>
							<div>2018/12/30 14:20</div>
						</li>
						<li>
							<div>6</div>
							<div>王**</div>
							<div>中了30元</div>
							<div>2018/12/30 14:20</div>
						</li>
						<li>
							<div>7</div>
							<div>王**</div>
							<div>中了30元</div>
							<div>2018/12/30 14:20</div>
						</li>
						<li>
							<div>8</div>
							<div>王**</div>
							<div>中了30元</div>
							<div>2018/12/30 14:20</div>
						</li>
					</ul>
				</div>
			</div>
		</div>

		<script type="text/javascript">
			function autoScroll(obj) {
				$(obj).find("ul").animate({
					marginTop: "-39px"
				}, 500, function() {
					$(this).css({
						marginTop: "0px"
					}).find("li:first").appendTo(this);
				})
			}
			$(function() {
				setInterval('autoScroll(".maquee")', 3000);

			})
		</script>

		</div>
	</body>

</html>